<template>
  <!-- 页面容器 -->
  <div class="page-container">
    <!-- 顶部标题栏 -->
    <header class="header">商家列表</header>

    <!-- 加载状态指示器 -->
    <div v-if="loading" class="py-20 flex justify-center">
      <div class="w-8 h-8 border-4 border-primary-500 border-t-transparent rounded-full animate-spin"></div>
    </div>

    <!-- 商家列表主内容区 -->
    <div v-else class="pb-20">
      <div class="space-y-4 p-4">
        <!-- 单个商家卡片 -->
        <div
            v-for="business in businesses"
            :key="business.id"
            @click="goToBusiness(business.id)"
            class="business-card bg-white rounded-lg p-4 flex space-x-4 cursor-pointer transition-all hover:shadow-md"
        >
          <!-- 商家图片区域 -->
          <div class="relative flex-shrink-0">
            <img
                :src="business.image"
                :alt="business.name"
                class="w-20 h-20 rounded-lg object-cover border border-gray-100"
            >
            <!-- 购物车数量指示器 -->
            <transition name="pop">
              <div
                  v-if="business.cartQuantity > 0"
                  class="cart-indicator"
              >
                {{ business.cartQuantity }}
              </div>
            </transition>
          </div>

          <!-- 商家信息区域 -->
          <div class="flex-1 min-w-0">
            <!-- 商家名称和距离 -->
            <div class="flex items-start justify-between">
              <h3 class="font-semibold text-gray-800 mb-1 truncate">{{ business.name }}</h3>
              <span v-if="business.distance" class="text-sm text-gray-500 whitespace-nowrap ml-2">{{ business.distance }}km</span>
            </div>

            <!-- 评分和月销量 -->
            <p class="text-sm text-gray-600 mb-1 flex items-center">
              <span class="text-yellow-400 mr-1">★</span>
              <span class="font-semibold">{{ business.rating }}</span>
              <span class="text-gray-400 mx-1">|</span>
              月售{{ business.monthlySales }}
            </p>

            <!-- 配送信息 -->
            <div class="text-sm">
              <p class="text-gray-500 mb-1 truncate">
                <span>¥{{ business.minOrder }}起送</span>
                <span class="mx-1">·</span>
                <span>配送费¥{{ business.deliveryFee }}</span>
              </p>
              <p class="text-gray-500 flex items-center">
                <i class="fas fa-clock text-gray-400 mr-1 text-xs"></i>
                预计{{ business.deliveryTime }}分钟送达
              </p>
            </div>

            <!-- 促销活动信息 -->
            <div v-if="business.promotions" class="mt-1 space-y-1">
              <div
                  v-for="(promotion, index) in business.promotions"
                  :key="index"
                  class="inline-flex items-center bg-purple-50 text-purple-600 px-2 py-0.5 rounded text-xs mr-1"
              >
                <i :class="['mr-1', promotionIcon(promotion.type)]"></i>
                {{ promotion.text }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部导航栏 -->
    <FooterNav />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import FooterNav from './FooterNav.vue'

// 导入商家图片资源
import sj01 from '@/assets/sj/sj01.png'
import sj02 from '@/assets/sj/sj02.png'
import sj03 from '@/assets/sj/sj03.png'
import sj04 from '@/assets/sj/sj04.png'
import sj05 from '@/assets/sj/sj05.png'
import sj06 from '@/assets/sj/sj06.png'
import sj07 from '@/assets/sj/sj07.png'
import sj08 from '@/assets/sj/sj08.png'

const router = useRouter()
const loading = ref(true)

// 模拟加载状态
setTimeout(() => loading.value = false, 800)

// 商家数据
const businesses = ref([
  {
    id: 1,
    name: '万家饺子（软件园E18店）',
    image: sj01,
    minOrder: 15,
    deliveryFee: 3,
    cartQuantity: 3,
    rating: 4.9,
    monthlySales: 345,
    deliveryTime: 30,
    distance: 3.22,
    promotions: [
      { type: 'discount', text: '满30减5，满50减10' },
      { type: 'free', text: '进店领10元红包' }
    ]
  },
  {
    id: 2,
    name: '小锅饭豆腐馆（全运店）',
    image: sj02,
    minOrder: 15,
    deliveryFee: 3,
    cartQuantity: 2,
    rating: 4.8,
    monthlySales: 256,
    deliveryTime: 25,
    distance: 2.15,
    promotions: [
      { type: 'discount', text: '特色豆腐锅立减5元' }
    ]
  },
  {
    id: 3,
    name: '麦当劳麦乐送（全运路店）',
    image: sj03,
    minOrder: 15,
    deliveryFee: 3,
    cartQuantity: 1,
    rating: 4.7,
    monthlySales: 678,
    deliveryTime: 20,
    distance: 1.85,
    promotions: [
      { type: 'discount', text: '巨无霸套餐特惠25元' },
      { type: 'free', text: '新客赠送薯条' }
    ]
  },
  {
    id: 4,
    name: '米村拌饭（浑南店）',
    image: sj04,
    minOrder: 15,
    deliveryFee: 3,
    cartQuantity: 0,
    rating: 4.6,
    monthlySales: 420,
    deliveryTime: 25,
    distance: 2.8,
    promotions: [
      { type: 'discount', text: '拌饭套餐特惠19.9元' }
    ]
  },
  {
    id: 5,
    name: '半亩良田排骨米饭',
    image: sj05,
    minOrder: 15,
    deliveryFee: 3,
    cartQuantity: 0,
    rating: 4.8,
    monthlySales: 195,
    deliveryTime: 28,
    distance: 1.2,
    promotions: [
      { type: 'discount', text: '排骨米饭套餐特惠22元' }
    ]
  },
  {
    id: 6,
    name: '茶兮鲜果饮品（国际软件园店）',
    image: sj06,
    minOrder: 15,
    deliveryFee: 3,
    cartQuantity: 0,
    rating: 4.9,
    monthlySales: 480,
    deliveryTime: 18,
    distance: 0.8,
    promotions: [
      { type: 'discount', text: '买一送一' },
      { type: 'free', text: '新客首单减3元' }
    ]
  },
  {
    id: 7,
    name: '唯一水果捞（软件园E18店）',
    image: sj07,
    minOrder: 15,
    deliveryFee: 3,
    cartQuantity: 0,
    rating: 4.7,
    monthlySales: 210,
    deliveryTime: 15,
    distance: 1.3,
    promotions: [
      { type: 'discount', text: '水果捞一份9.9元' }
    ]
  },
  {
    id: 8,
    name: '满园春饼（全运路店）',
    image: sj08,
    minOrder: 15,
    deliveryFee: 3,
    cartQuantity: 0,
    rating: 4.6,
    monthlySales: 375,
    deliveryTime: 30,
    distance: 2.1,
    promotions: [
      { type: 'discount', text: '满50减8，满80减15' },
    ]
  }
])

/**
 * 跳转到商家详情页
 * @param id 商家ID
 */
const goToBusiness = (id: number) => {
  router.push(`/business/${id}`)
}

/**
 * 根据促销类型返回对应的图标类名
 * @param type 促销类型
 * @returns 图标类名
 */
const promotionIcon = (type: string) => {
  switch(type) {
    case 'discount':
      return 'fas fa-tag'
    case 'free':
      return 'fas fa-gift'
    default:
      return 'fas fa-badge-percent'
  }
}
</script>

<style scoped>
/* 商家卡片样式 */
.business-card {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 购物车数量指示器样式 */
.cart-indicator {
  position: absolute;
  top: -4px;
  right: -4px;
  background-color: #f5222d;
  color: white;
  font-size: 12px;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* 顶部标题栏样式 */
.header {
  @apply sticky top-0 z-10 py-4 text-lg font-bold text-center bg-white shadow-sm;
}

/* 购物车数量指示器动画 */
@keyframes pop {
  0% { transform: scale(0); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
</style>